<template>
  <div class="container">
    <div class="image-container1">
      <el-card class="card" shadow="hover">
        <el-image
          lazy
          :src="visitCntDistribution"
          style="width: 100%; height: 400px"
          :preview-src-list="srcList1"
        />
      </el-card>
      <el-card class="card" shadow="hover">
        <el-image
          lazy
          :src="transRateDistribution"
          style="width: 100%; height: 400px"
          :preview-src-list="srcList2"
        />
      </el-card>
      <el-card class="card" shadow="hover">
        <el-image
          lazy
          :src="lifeCycleDistribution"
          style="width: 100%; height: 400px"
          :preview-src-list="srcList3"
        />
      </el-card>
    </div>

    <div class="image-container2">
      <el-card class="card" shadow="hover">
        <el-image
          lazy
          :src="RDistribution"
          style="width: 100%; height: 400px"
          :preview-src-list="srcList4"
        />
      </el-card>
      <el-card class="card" shadow="hover">
        <el-image
          lazy
          :src="FDistribution"
          style="width: 100%; height: 400px"
          :preview-src-list="srcList5"
        />
      </el-card>
      <el-card class="card" shadow="hover">
        <el-image
          lazy
          :src="correlationCoefficientHeatmap"
          style="width: 100%; height: 400px"
          :preview-src-list="srcList6"
        />
      </el-card>
    </div>

    <div class="image-container3">
      <el-card class="card" shadow="hover">
        <el-image
          lazy
          :src="silhouetteScore"
          style="width: 100%; height: 400px"
          :preview-src-list="srcList7"
        />
      </el-card>
      <el-card class="card" shadow="hover">
        <el-image
          lazy
          :src="calinskiHarabaszScore"
          style="width: 100%; height: 400px"
          :preview-src-list="srcList8"
        />
      </el-card>
      <el-card class="card" shadow="hover">
        <el-image
          lazy
          :src="daviesBouldinScore"
          style="width: 100%; height: 400px"
          :preview-src-list="srcList9"
        />
      </el-card>
    </div>
  </div>
</template>

<script setup lang="js">
import visitCntDistribution from '@/assets/images/visit_cnt_distribution.png';
import transRateDistribution from '@/assets/images/trans_rate_distribution.png';
import lifeCycleDistribution from '@/assets/images/life_cycle_distribution.png';
import RDistribution from '@/assets/images/R_distribution.png';
import FDistribution from '@/assets/images/F_distribution.png';
import correlationCoefficientHeatmap from '@/assets/images/correlation_coefficient_heatmap.png';
import silhouetteScore from '@/assets/images/silhouette_score.png';
import calinskiHarabaszScore from '@/assets/images/calinski_harabasz_score.png';
import daviesBouldinScore from '@/assets/images/davies_bouldin_score.png';

const srcList1 = [visitCntDistribution];
const srcList2 = [transRateDistribution];
const srcList3 = [lifeCycleDistribution];
const srcList4 = [RDistribution];
const srcList5 = [FDistribution];
const srcList6 = [correlationCoefficientHeatmap];
const srcList7 = [silhouetteScore];
const srcList8 = [calinskiHarabaszScore];
const srcList9 = [daviesBouldinScore];
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  height: 1380px;
}

.image-container1,
.image-container2,
.image-container3 {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.el-card {
  flex: 1;
}

.image-content {
  width: 100%;
  height: 400px;
}
</style>
